<template>
	<el-config-provider :locale="currentLocale">
		<div class="container">
			<div class="layout-left">
				<el-menu default-active="2" class="el-menu-vertical-demo">
					<el-menu-item index="2" v-for="(item, index) in comp" :key="index" @click="onSwitchComp(item)">
						<span>
							{{ item.label }}
						</span>
					</el-menu-item>
				</el-menu>
			</div>
			<div class="layout-right">
				<router-view></router-view>
			</div>
		</div>
	</el-config-provider>
</template>

<script lang="ts" setup>
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { ElConfigProvider } from "element-plus";
import { router } from "@/router";

import { computed } from "vue";
const currentLocale = computed(() => zhCn)
const comp = [
	{
		label: "分页表格",
		link: "DataQueryPage",
	},
	{
		label: "表格懒加载",
		link: "TableLoad",
	},
	{
		label: "详情页",
		link: "DetailPage",
	},
	{
		label: "树形菜单",
		link: "TreeMenu",
	},
	{
		label: "页面弹出层",
		link: "pageDialog",
	},
	{
		label: "级联选择",
		link: "Cascader",
	},
	{
		label: "表单",
		link: "FormBox",
	},
	{
		label: "表单展示形式",
		link: "PreviewForm",
	},
	{
		label: "地图",
		link: "Map",
	},
];

const onSwitchComp = (item: any) => {
	router.push({ name: item.link });
};
</script>

<style lang="scss" scoped>
$width: 200px;

.container {
	display: flex;
	overflow-y: scroll;
}

.layout-left {
	position: fixed;
	left: 0;
	width: $width;
	background: rgb(41, 41, 87);
	height: 100%;
}

.layout-right {
	position: fixed;
	left: $width;
	width: calc(100% - $width);
	height: 100vh !important;
	overflow: auto;
}

.layout-left__item {
	color: #fff;
	cursor: pointer;
	background: rgb(85, 85, 199);
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.layout-left__item.is-active {
	background: rgb(99, 99, 179);
}
</style>
